<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 	request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
	<base href="<%=basePath%>">
<html>
<head>
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>


	<script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>


	<script type="text/javascript">

	$(function(){
		<!--自动补全插件-->
		$("#add-contactCustomerName").typeahead({
			source: function (query, process) {
				$.get(//ajax的另一种写法
						"tran/getCustomerName.do",//url
						{ "name" : query },//data
						function (data) {//回调函数
							//alert(data);
							/*
                                data:
                                    [{客户名称1},{客户名称2},{客户名称3}...]
                            */
							process(data);
						},
						"json"//dataType
				);
			},
			delay: 1500
		});

		<!--自动补全插件-->
		$("#edit-customerName").typeahead({
			source: function (query, process) {
				$.get(//ajax的另一种写法
						"tran/getCustomerName.do",//url
						{ "name" : query },//data
						function (data) {//回调函数
							//alert(data);
							/*
                                data:
                                    [{客户名称1},{客户名称2},{客户名称3}...]
                            */
							process(data);
						},
						"json"//dataType
				);
			},
			delay: 1500
		});

		//日历控件
		$(".time").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
			autoclose: true,
			todayBtn: true,
			pickerPosition: "top-left"
		});


		//定制字段
		$("#definedColumns > li").click(function(e) {
			//防止下拉菜单消失
	        e.stopPropagation();
	    });

		showContactList(1,8)

//给查询按钮绑定事件，执行分页查询操作
		$("#queryContactBtn").click(function () {

			$("#hidden-owner").val($.trim($("#query-owner").val()))
			$("#hidden-fullname").val($.trim($("#query-fullname").val()))
			$("#hidden-customerName").val($.trim($("#query-customerName").val()))
			$("#hidden-source").val($.trim($("#query-source").val()))
			$("#hidden-birth").val($.trim($("#query-birth").val()))


			showContactList(1,9)


		})

//给创建按钮绑定事件，铺垫新增联系人的模态窗口
		$("#addContactBtn").click(function(){
			$.ajax({

				url:"contact/addContact.do",
				type:"get",
				data:{

				},
				dataType:"json",
				success:function(resp){
		/*
			resp:
			     {"userList":[{},{},{},{}]}

		*/

				var html="";
				$.each(resp.userList,function (i,n) {

					html+='<option value="'+n.id+'">'+n.name+'</option>'
				})

				$("#add-contactOwner").html(html)
				}

			})


			$("#myCreateContactsModal").modal("show")
		})


//给保存按钮绑定事件，执行新增联系人的操作
		$("#saveContactBtn").click(function(){


			$.ajax({
				url:"contact/saveContact.do",
				type:"post",
				data:{
					"owner":$.trim($("#add-contactOwner").val()),
					"fullname":$.trim($("#add-contactName").val()),
					"source":$.trim($("#add-contactSource").val()),
					"appellation":$.trim($("#add-contactCall").val()),
					"job":$.trim($("#add-contactJob").val()),
					"mphone":$.trim($("#add-contactMphone").val()),
					"email":$.trim($("#add-contactEmail").val()),
					"birth":$.trim($("#add-contactBirth").val()),
					"customerName":$.trim($("#add-contactCustomerName").val()),
					"description":$.trim($("#add-contactDescription").val()),
					"contactSummary":$.trim($("#add-contactSummary").val()),
					"nextContactTime":$.trim($("#add-contactNextContactTime").val()),
					"address":$.trim($("#add-contactAddress").val())
				},
				dataType:"json",
				success:function(resp){
		/*
			resp:
				{"success":true/false}
		*/
				if(resp.success){
					alert("新增联系人成功")
					$("#myCreateContactsModal").modal("hide")
					showContactList(1,8)
				}else{
					alert("新增联系人失败")

				}


				}


			})

		})

//复选框全选.通过全选框控制其他复选框
		$("#quanxuan").click(function(){
			$("input[name=xuanze]").prop("checked",this.checked)
		})
//复选框全选，通过其他复选框控制全选框
		$("#contactList").on("click",$("input[name=xuanze]"),function(){
	$("#quanxuan").prop("checked",$("input[name=xuanze]:checked").length==$("input[name=xuanze]").length?true:false)
		})

//给修改按钮绑定事件，铺垫修改联系人的模态窗口
		$("#editContactBtn").click(function(){

			var $quanxuan=$("#quanxuan")
			var $xz=$("input[name=xuanze]:checked")
			if($xz.length==0){
				alert("请选择你要修改的联系人")
			}else if($xz.length>1){
				alert("最多只支持一次性修改一条联系人哦")
			}else if($quanxuan.checked){
				alert("最多只支持一次性修改一条联系人哦")
			}else {

				var contactId=$xz.val()
				$("#hidden-editContact").val($xz.val())
				//alert($("#hidden-editContact").val())

				$.ajax({
					url:"contact/editContact.do",
					type:"post",
					data:{
						"contactId":contactId
					},
					dataType:"json",
					success:function(resp){
		/*
			resp:
				{"userList":[{},{},{}],"contact":{}}

		*/
			///先铺垫所有者下拉框
					var html="<option></option>"
				$.each(resp.userList,function(i,n){
					html+='<option value="'+n.id+'">'+n.name+'</option>';
				})

						$("#edit-contactOwner").html(html)



						//处理单条
						$("#edit-contactOwner").val(resp.contact.owner)
						$("#edit-contactSource").val(resp.contact.source)
						$("#edit-contactCall").val(resp.contact.appellation)
						$("#edit-contactDescription").val(resp.contact.description)
						$("#edit-contactFullName").val(resp.contact.fullname)
						$("#edit-contactJob").val(resp.contact.job)
						$("#edit-contactBirth").val(resp.contact.birth)
						$("#edit-contactEmail").val(resp.contact.email)
						$("#edit-contactSummary").val(resp.contact.contactSummary)
						$("#edit-contactAddress").val(resp.contact.address)
						$("#edit-nextContactTime").val(resp.contact.nextContactTime)

						$("#edit-customerName").val(resp.customer.name)

						$("#editContactsModal").modal("show")

					}

				})

			}
		})


//给更新按钮绑定事件，执行联系人的修改操作
		$("#updateContactBtn").click(function(){
		var id=$("#hidden-editContact").val()

			$.ajax({
				url:"contact/updateContact.do",
				type:"post",
				data:{
					"id":id,
					"owner":$.trim($("#edit-contactOwner").val()),
					"source":$.trim($("#edit-contactSource").val()),
					"customerId":$.trim($("#edit-customerName").val()),
					"fullname":$.trim($("#edit-contactFullName").val()),
					"appellation":$.trim($("#edit-contactCall").val()),
					"email":$.trim($("#edit-contactEmail").val()),
					"mphone":$.trim($("#edit-contactMphone").val()),
					"job":$.trim($("#edit-contactJob").val()),
					"birth":$.trim($("#edit-contactBirth").val()),
					"createTime":$.trim($("#edit-nextContactTime").val()),
					"address":$.trim($("#edit-contactAddress").val()),
					"nextContactTime":$.trim($("#edit-nextContactTime").val()),
					"contactSummary":$.trim($("#edit-contactSummary").val()),
					"description":$.trim($("#edit-contactDescription").val())


				},
				dataType:"json",
				success:function(resp){
		/*
			resp:
			{"success":true/false}
		*/
				if(resp.success){
					alert("修改联系人成功")
					showContactList(1,8)
					$("#editContactsModal").modal("hide")
				}else{
					alert("修改联系人失败")
				}



				}




			})





		})

//给删除按钮绑定事件，执行批量删除操作
		$("#deleteContactBtn").click(function(){

			var xuanzeLen=$("input[name=xuanze]").length

			var	$qx=$("#quanxuan:checked")
			var $xz=$("input[name=xuanze]:checked")

			if($qx.length==0&&$xz.length==0){

				alert("请选择你需要删除的联系人")

			}else if ($qx.length==1&&$xz.length==xuanzeLen){
				if(confirm("确认要将当前页的所有联系人都删除吗？？？？？？")){

					if(confirm("一旦删除就不能恢复！要坚持删除吗？")){

						var $qx=$("input[name=xuanze]")

						var html=""
						for (var i = 0; i <$qx.length ; i++) {
							html+='id='+$qx[i].value
							if(i+1<$qx.length){
								html+='&'
							}
						}


						$.ajax({
							url:"contact/deleteContact.do",
							type:"post",
							data:html,
							dataType:"",
							success:function(resp){
								/*
                                    resp:
                                        {"success":true/false}
                                */
								if(resp.success){
									alert("删除联系人成功")
									showContactList(1,8)
								}else{
									alert("删除联系人失败")
								}

							}

						})
					}


				}
			}else if($xz.length!=0&&$qx.length==0){
				if(confirm("确定要删除所选择的联系人吗？")){

					var html=""
					for (var i = 0; i <$xz.length ; i++) {
						html+='id='+$xz[i].value

						if(i+1<$xz.length){
							html+="&"
						}
					}
					alert(html)

					$.ajax({
						url:"contact/deleteContact.do",
						type:"post",
						data:html,
						dataType:"",
						success:function(resp){
		/*
			resp:
				{"success":true/false}
		*/
						if(resp.success){
							alert("删除联系人成功")
							showContactList(1,8)
						}else{
							alert("删除联系人失败")
						}

						}

					})

				}
			}





		})





	});
//页面加载完毕=========================================================================================



//展现联系人列表方法
		function showContactList(pageNo,pageSize){

			$.ajax({

				url:"contact/getContactList.do",
				type:"get",
				data:{
					"owner":$("#hidden-owner").val(),
					"fullname":$("#hidden-fullname").val(),
					"customerName":$("#hidden-customerName").val(),
					"source":$("#hidden-source").val(),
					"birth":$("#hidden-birth").val(),
					"pageNo":pageNo,
					"pageSize":pageSize

				},
				dataType:"json",
				success:function (resp) {
		/*
			resp:
				{"total""total,"contactsList":[{联系人1},{联系人2},{联系人3}]}
		 */

				var html="";
				$.each(resp.dataList,function (i,n) {
							html+='<tr>';
							html+='<td><input type="checkbox" value="'+n.id+'" name="xuanze"/></td>';
							html+='<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'contact/detail.do?id='+n.id+'\'">'+n.fullname+'</a></td>';
							html+='<td>'+n.customerId+'</td>';
							html+='<td>'+n.owner+'</td>';
							html+='<td>'+n.source+'</td>';
							html+='<td>'+n.birth+'</td>';
							html+='</tr>';

				})

					$("#contactList").html(html)


					//计算总页数
					var totalPages=resp.total%pageSize==0?resp.total:parseInt(resp.total/pageSize)+1;


					//处理完数据后，加入分页插件
					$("#ContactPage").bs_pagination({
						currentPage: pageNo, // 页码
						rowsPerPage: pageSize, // 每页显示的记录条数
						maxRowsPerPage: 20, // 每页最多显示的记录条数
						totalPages: totalPages, // 总页数
						totalRows: resp.total, // 总记录条数

						visiblePageLinks: 3, // 显示几个卡片

						showGoToPage: true,
						showRowsPerPage: true,
						showRowsInfo: true,
						showRowsDefaultInfo: true,

						onChangePage : function(event, data){
							showContactList(data.currentPage , data.rowsPerPage);
						}
					});


				}



			})



		}




</script>
</head>
<body>

	
	<!-- 创建联系人的模态窗口 -->
	<div class="modal fade" id="myCreateContactsModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
						<button type="button" class="close" onclick="$('#myCreateContactsModal').modal('hide');">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabelx">创建联系人</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-contactsOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="add-contactOwner">
								  <%--<option>zhangsan</option>
								  <option>lisi</option>
								  <option>wangwu</option>--%>
								</select>
							</div>
							<label for="create-clueSource" class="col-sm-2 control-label">来源</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="add-contactSource">
								  <option></option>
								<c:forEach items="${applicationScope.source}" var="source">
									<option value="${source.value}">${source.text}</option>
								</c:forEach>
								  <option>聊天</option>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-surname" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="add-contactName">
							</div>
							<label for="create-call" class="col-sm-2 control-label">称呼</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="add-contactCall">
								  <option></option>
									<c:forEach items="${applicationScope.appellation}" var="call">
										<option value="${call.value}">${call.text}</option>
									</c:forEach>

								</select>
							</div>
							
						</div>
						
						<div class="form-group">
							<label for="create-job" class="col-sm-2 control-label">职位</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="add-contactJob">
							</div>
							<label for="create-mphone" class="col-sm-2 control-label">手机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="add-contactMphone">
							</div>
						</div>
						
						<div class="form-group" style="position: relative;">
							<label for="create-email" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="add-contactEmail">
							</div>
							<label for="create-birth" class="col-sm-2 control-label">生日</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="add-contactBirth" readonly>
							</div>
						</div>
						
						<div class="form-group" style="position: relative;">
							<label for="create-customerName" class="col-sm-2 control-label">客户名称</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="add-contactCustomerName" placeholder="支持自动补全，输入客户不存在则新建">
							</div>
						</div>
						
						<div class="form-group" style="position: relative;">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="add-contactDescription"></textarea>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>
						
						<div style="position: relative;top: 15px;">
							<div class="form-group">
								<label for="create-contactSummary1" class="col-sm-2 control-label">联系纪要</label>
								<div class="col-sm-10" style="width: 81%;">
									<textarea class="form-control" rows="3" id="add-contactSummary"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label for="create-nextContactTime1" class="col-sm-2 control-label">下次联系时间</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control time" id="add-contactNextContactTime" readonly>
								</div>
							</div>
						</div>

                        <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                        <div style="position: relative;top: 20px;">
                            <div class="form-group">
                                <label for="edit-address1" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="add-contactAddress">北京大兴区大族企业湾</textarea>
                                </div>
                            </div>
                        </div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" id="saveContactBtn" class="btn btn-primary" data-dismiss="modal">保存989</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改联系人的模态窗口 -->
	<div class="modal fade" id="editContactsModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">

				<div class="modal-header">
					<button type="button" class="close" onclick="$('#editContactsModal').modal('hide');">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabelx">修改联系人</h4>
				</div>

				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<input type="hidden" id="hidden-editContact"><!--隐藏域，用于修改联系人-->
						<div class="form-group">
							<label for="edit-contactsOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-contactOwner">
								</select>
							</div>
							<label for="edit-clueSource1" class="col-sm-2 control-label">来源</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-contactSource">
								  <option></option>
								 <c:forEach items="${applicationScope.source}" var="source">
									<option value="${source.value}">${source.text}</option>
								 </c:forEach>

								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-surname" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-contactFullName" >
							</div>
							<label for="edit-call" class="col-sm-2 control-label">称呼</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-contactCall">
								  <option></option>
									<c:forEach items="${applicationScope.appellation}" var="call">
                                       <option value="${call.value}">${call.text}</option>
                                   </c:forEach>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-job" class="col-sm-2 control-label">职位</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-contactJob" value="CTO">
							</div>
							<label for="edit-mphone" class="col-sm-2 control-label">手机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-contactMphone" value="12345678901">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-email" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-contactEmail" value="lisi@bjpowernode.com">
							</div>
							<label for="edit-birth" class="col-sm-2 control-label">生日</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-contactBirth" readonly>
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-customerName" class="col-sm-2 control-label">客户名称</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-customerName" placeholder="支持自动补全，输入客户不存在则新建哦" value="动力节点">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-contactDescription">这是一条线索的描述信息</textarea>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>
						
						<div style="position: relative;top: 15px;">
							<div class="form-group">
								<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
								<div class="col-sm-10" style="width: 81%;">
									<textarea class="form-control" rows="3" id="edit-contactSummary"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control time" id="edit-nextContactTime" readonly>
								</div>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                        <div style="position: relative;top: 20px;">
                            <div class="form-group">
                                <label for="edit-address2" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="edit-contactAddress">北京大兴区大族企业湾</textarea>
                                </div>
                            </div>
                        </div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" id="updateContactBtn" class="btn btn-primary" data-dismiss="modal">更新858</button>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>联系人列表</h3>
			</div>
		</div>
	</div>
	
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
	
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">

			<input type="hidden" id="hidden-owner">
			<input type="hidden" id="hidden-fullname">
			<input type="hidden" id="hidden-customerName">
			<input type="hidden" id="hidden-source">
			<input type="hidden" id="hidden-birth">

			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="query-owner">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">姓名</div>
				      <input class="form-control" type="text" id="query-fullname">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">客户名称</div>
				      <input class="form-control" type="text" id="query-customerName">
				    </div>
				  </div>
				  

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">来源151</div>
				      <select class="form-control" id="query-source">
						  <option></option>
						  <c:forEach items="${applicationScope.source}" var="source">
							  <option  value="${source.value}">${source.text}</option>
						  </c:forEach>
						</select>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">生日</div>
				      <input class="form-control" type="text" id="query-birth">
				    </div>
				  </div>
				  
				  <button type="button" id="queryContactBtn" class="btn btn-default">查询857</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 10px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" id="addContactBtn" class="btn btn-primary" data-toggle="modal" ><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" id="editContactBtn" class="btn btn-default" data-toggle="modal" ><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" id="deleteContactBtn" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除889</button>
				</div>
				
				
			</div>
			<div style="position: relative;top: 20px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="quanxuan"/></td>
							<td>姓名</td>
							<td>客户名称</td>
							<td>所有者</td>
							<td>来源996</td>
							<td>生日</td>
						</tr>
					</thead>
					<tbody id="contactList">
						<%--<tr>
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">李四</a></td>
							<td>动力节点</td>
							<td>zhangsan</td>
							<td>广告</td>
							<td>2000-10-10</td>
						</tr>--%>

					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 10px;">
				<div id="ContactPage"></div>
				<%--<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
				</div>
				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							10
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">20</a></li>
							<li><a href="#">30</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>--%>
				<%--<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination">
							<li class="disabled"><a href="#">首页</a></li>
							<li class="disabled"><a href="#">上一页</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">下一页</a></li>
							<li class="disabled"><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>--%>
			</div>
			
		</div>
		
	</div>
</body>
</html>